<template>
  <div class="Header">
    <!-- logo 左部 -->
      <img class="logo" src="../../static/images/logo.png"/>
    <!-- 导航中部 -->
      <div id="menu">
        <a class="menu-text" href="#">首页</a>
        <a class="menu-text" href="#">下载APP</a>
        <input class="search-input" type="search" placeholder="搜索" />

      </div>
      <!-- 导航右部 -->
      <div id="sign">
        <a class="sign-in" href="#">登录</a>
        <a class="sign-up" href="#">注册</a>
        <a class="iconfont" href="#">写文章</a>
      </div>


  </div>
</template>

<script>
  export default{

  };
</script>

<style>
  body{
    margin: 0;
    padding: 0;
  }
.Header{
  width: 100%;
  background-color: #000000;
 display: flex;
 align-items: center;
 border: 1px solid #0aabf0;
 position: relative;
 top: -60px;
}
.logo{
  width: 100px;
  height: 70px;
  margin-right: 10px;
  margin-left: 50px;

}
#menu{
  margin-left: 110px;

}
#menu :first-child{
  color: #ff9c46;
}
.menu-text{
  text-decoration: blink;
  margin: 20px;
  color: #ff9c46;
}
.search-input{
  border: none;
  border-radius:100px;
  outline: medium;
  width: 220px;
  height: 40px;
  margin: 20px;
  background-color: #c8c8c8;
}
#sign{
  margin-left:400px;
  
}
.sign-in{
  color: #ff9c46;
  text-decoration: blink;
  margin: 30px;
}
.sign-up{
  color: #ff9c46;
  border: 1px solid #ff9c46;
  border-radius:20px;
  padding: 10px;
  text-decoration:blink;
  margin: 30px;
}
.iconfont{
  font-size: 16px;
  text-decoration:blink;
  margin: 30px;
  color: #ff9c46;
}
#menu :hover{
  color: #ff9c46;
}
#sign :hover{
  color: #ff9c46;
}
</style>
